<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			ul {
				list-style: none;
			}

			body {
				background-color: black;
			}

			.c-nav {
				width: 900px;
				height: 42px;
				background: #fff url(images/rss.png) no-repeat right center;
				margin: 100px auto;
				border-radius: 5px;
				position: relative;
			}

			.c-nav ul {
				position: absolute;
			}

			.c-nav li {
				float: left;
				width: 83px;
				text-align: center;
				line-height: 42px;
			}

			.c-nav li a {
				color: #333;
				text-decoration: none;
				display: inline-block;
				height: 42px;
			}

			.c-nav li a:hover {
				color: white;
			}

			.c-nav li.current a {
				color: #0dff1d;
			}

			.cloud {
				position: absolute;
				left: 0;
				top: 0;
				width: 83px;
				height: 42px;
				background: url(images/cloud.gif) no-repeat;
			}
		</style>
		<script src="animate.js"></script>
		<script>
			window.addEventListener('load', function() {
				var cloud = document.querySelector('.cloud');
				var c_nav = document.querySelector('.c-nav');
				var lis = c_nav.querySelectorAll('li');

				var current = 0;

				for (var i = 0; i < lis.length; i++) {
					lis[i].setAttribute('index', i);
					lis[i].addEventListener('mouseenter', function() {
						animate(cloud, this.offsetLeft);
					});
					lis[i].addEventListener('mouseleave', function() {
						animate(cloud, current);
					})
					lis[i].addEventListener('click', function() {
						for (var k = 0; k < lis.length; k++) {
							lis[k].className = '';
						}
						this.className = 'current';
						var index = this.getAttribute('index');
						var target = this.offsetWidth * index;
						animate(cloud, target);
						current = this.offsetLeft;
					})
				}

			});
		</script>
	</head>

	<body>
		<div id="c_nav" class="c-nav">
			<span class="cloud"></span>
			<ul>
				<li class="current"><a href="#">首页新闻</a></li>
				<li><a href="#">师资力量</a></li>
				<li><a href="#">活动策划</a></li>
				<li><a href="#">企业文化</a></li>
				<li><a href="#">招聘信息</a></li>
				<li><a href="#">公司简介</a></li>
				<li><a href="#">我是佩奇</a></li>
				<li><a href="#">啥是佩奇</a></li>
			</ul>
		</div>
	</body>

</html>
